<template>
    <div>
    <Header></Header>
    <Nav></Nav>
    <span class="headertitle">课题申报</span>
    <el-card class="box-card">
        <el-button type="primary" @click="dialogVisible = true">信息填报</el-button>
        <el-button type="primary" @click="dialogVisible2 = true">上传材料</el-button>
        <el-button type="primary">提交申请</el-button>
        <!-- table -->
        <el-table
                  :data="tableData"
                  tooltip-effect="dark"
                  style="width: 100%"
                    >
             <el-table-column type="selection" width="55"></el-table-column>
             <el-table-column label="课题编号" width="150">
               <template slot-scope="scope">{{ scope.row.name1 }}</template>
             </el-table-column>
             <el-table-column prop="name2" label="课题名称" width="400"></el-table-column>
             <el-table-column prop="name3" label="负责人" width="150"></el-table-column>
             <el-table-column prop="name4" label="课题类别"></el-table-column>
             <el-table-column prop="name5" label="联系方式"></el-table-column>
             <el-table-column prop="name6" label="课题配额"></el-table-column>
             <el-table-column label="操作">
                <el-link type="primary">下载申报书</el-link>
             </el-table-column>
        </el-table>
    </el-card>
    <!-- 信息填报 -->
        <el-dialog
          title="信息填报"
          :visible.sync="dialogVisible"
          width="50%">
          <el-descriptions title="课题基本信息" :colon="false" :column="2">
            <el-descriptions-item>
                <el-form ref="form" :model="form" label-width="80px">
                    <el-form-item label="课题名称">
                      <el-input v-model="form.name" style="width: 300px;" placeholder="请输入"></el-input>
                    </el-form-item>
                </el-form>
            </el-descriptions-item>
            <el-descriptions-item>
                <el-form ref="form" :model="form" label-width="80px">
                    <el-form-item label="关键词">
                      <el-input v-model="form.name2" style="width: 300px;" placeholder="请输入（关键词之间 请用空格键间隔）"></el-input>
                    </el-form-item>
                </el-form>
            </el-descriptions-item>
            <!--  -->
            <el-descriptions-item>
                <el-form ref="form" :model="form" label-width="80px">
                    <el-form-item label="课题类别">
                        <el-select v-model="form.region" placeholder="请选择" style="width: 300px;">
                          <el-option label="区域一" value="shanghai"></el-option>
                          <el-option label="区域二" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </el-descriptions-item>
            <el-descriptions-item>
                <el-form ref="form" :model="form" label-width="80px">
                    <el-form-item label="学科类别">
                        <el-select v-model="form.region2" placeholder="请选择" style="width: 300px;">
                          <el-option label="区域一" value="shanghai"></el-option>
                          <el-option label="区域二" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </el-descriptions-item>
            <!--  -->
            <el-descriptions-item>
                <el-form ref="form" :model="form" label-width="80px">
                    <el-form-item label="研究类型">
                        <el-select v-model="form.region3" placeholder="请选择" style="width: 300px;">
                          <el-option label="区域一" value="shanghai"></el-option>
                          <el-option label="区域二" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </el-descriptions-item>
            <el-descriptions-item>
                <el-form ref="form" :model="form" label-width="80px">
                    <el-form-item label="预期成果">
                        <el-select v-model="form.region4" placeholder="请选择" style="width: 300px;">
                          <el-option label="区域一" value="shanghai"></el-option>
                          <el-option label="区域二" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </el-descriptions-item>
            <!-- 摘要 -->
            <el-descriptions-item>
                <el-form ref="form" :model="form" label-width="80px">
                    <el-form-item label="摘要">
                      <el-input class="zy" type="textarea" v-model="form.name3" style="width: 760px;" placeholder="请输入"></el-input>
                    </el-form-item>
                </el-form>
            </el-descriptions-item>
          </el-descriptions>
          <!-- 课题参与人员 -->
          <el-descriptions title="课题参与人员" :colon="false" :column="1">
            <el-descriptions-item>
                <el-button type="primary" @click="dialogVisible3 =true">新增</el-button>
                <el-button class="bji">编辑</el-button>
                <el-button class="del">删除</el-button>
            </el-descriptions-item>
            <el-descriptions-item style="font-size: 16px;">
              <el-table
                    :data="tableData2"
                    tooltip-effect="dark"
                    style="width: 100%"
                      >
               <el-table-column type="selection" width="55"></el-table-column>
               <el-table-column label="角色" width="100">
                 <template slot-scope="scope">{{ scope.row.name1 }}</template>
               </el-table-column>
               <el-table-column prop="name2" label="姓名" width="80"></el-table-column>
               <el-table-column prop="name3" label="性别" width="100"></el-table-column>
               <el-table-column prop="name4" label="身份证号"></el-table-column>
               <el-table-column prop="name5" label="联系电话"></el-table-column>
               <el-table-column prop="name6" label="邮箱"></el-table-column>
               <el-table-column prop="name7" label="单位名称" width="100"></el-table-column>
          </el-table>
            </el-descriptions-item>
          </el-descriptions>

          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
          </span>
        </el-dialog>
        <!-- 上传材料 -->
        <el-dialog
          title="上传材料"
          :visible.sync="dialogVisible2"
          width="30%"
          >
             <el-upload
              class="upload-demo"
              drag
              action="https://jsonplaceholder.typicode.com/posts/"
              :file-list="fileList"
              multiple>
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
              <div class="el-upload__tip" slot="tip">只能上传pdf文件，且不超过10M,上传的材料包括:保密协议、评审通知或评审要求</div>
            </el-upload>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible2 = false">保存</el-button>
            <el-button type="primary" @click="dialogVisible2 = false">提交</el-button>
          </span>
        </el-dialog>
        <!-- 新增 用户信息维护 -->
        <el-dialog
          title="人员信息维护"
          :visible.sync="dialogVisible3"
          width="50%"
          >
          <el-row>
          <el-col :span="12">
            <el-form ref="form1"  :model="form1" label-width="80px">
              <el-form-item label="姓名" >
                <el-input v-model="form.name" style="width: 300px;" placeholder="请输入"></el-input>
              </el-form-item>
            </el-form>
          </el-col>
          <el-col :span="12">
            <el-form  :model="form1" label-width="80px">
              <el-form-item label="性别">
                <el-select v-model="form1.region" placeholder="请选择" style="width: 300px;">
                  <el-option label="男" value="shanghai"></el-option>
                  <el-option label="女" value="beijing"></el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
          <!-- 2 -->
          <el-row>
          <el-col :span="12">
            <el-form  :model="form1" label-width="80px">
              <el-form-item label="身份证号" >
                <el-input v-model="form.name2" style="width: 300px;" placeholder="请输入"></el-input>
              </el-form-item>
            </el-form>
          </el-col>
          <el-col :span="12">
            <el-form  :model="form1" label-width="80px">
              <el-form-item label="手机号码">
                <el-input v-model="form.name3" style="width: 300px;" placeholder="请输入"></el-input>
              </el-form-item>
            </el-form>
          </el-col>
          </el-row>
          <!-- 3 -->
          <el-row>
          <el-col :span="12">
            <el-form  :model="form1" label-width="80px">
              <el-form-item label="邮箱地址" >
                <el-input v-model="form.name4" style="width: 300px;" placeholder="请输入"></el-input>
              </el-form-item>
            </el-form>
          </el-col>
          <el-col :span="12">
            <el-form  :model="form1" label-width="80px">
              <el-form-item label="单位名称">
                <el-input v-model="form.name5" style="width: 300px;" placeholder="请输入"></el-input>
              </el-form-item>
            </el-form>
          </el-col>
          </el-row>
          <!-- 4 -->
          <el-row>
          <el-col :span="12">
            <el-form  :model="form1" label-width="80px">
              <el-form-item label="通讯地址" >
                <el-input v-model="form.name6" style="width: 300px;" placeholder="请输入"></el-input>
              </el-form-item>
            </el-form>
          </el-col>
          <el-col :span="12">
            <el-form  :model="form1" label-width="80px">
              <el-form-item label="职称">
                <el-select v-model="form1.region2" placeholder="请选择" style="width: 300px;">
                  <el-option label="A" value="shanghai"></el-option>
                  <el-option label="B" value="beijing"></el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
          <!-- 5 -->
          <el-row>
          <el-col :span="12">
            <el-form  :model="form1" label-width="80px">
              <el-form-item label="职务">
                <el-select v-model="form1.region3" placeholder="请选择" style="width: 300px;">
                  <el-option label="A" value="shanghai"></el-option>
                  <el-option label="B" value="beijing"></el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </el-col>
          <el-col :span="12">
            <el-form  :model="form1" label-width="80px">
              <el-form-item label="学历">
                <el-select v-model="form1.region4" placeholder="请选择" style="width: 300px;">
                  <el-option label="A" value="shanghai"></el-option>
                  <el-option label="B" value="beijing"></el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
          <!--  -->
            <el-form  :model="form1" label-width="80px">
              <el-form-item label="学位">
                <el-select v-model="form1.region5" placeholder="请选择" style="width: 300px;">
                  <el-option label="A" value="shanghai"></el-option>
                  <el-option label="B" value="beijing"></el-option>
                </el-select>
              </el-form-item>
            </el-form>
          <el-form :model="form1" label-width="80px">
            <el-form-item label="摘要">
              <el-input type="textarea" v-model="form1.desc" style="width: 760px;" placeholder="请输入"></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible3 = false">保 存</el-button>
            <el-button type="primary" @click="dialogVisible3 = false">发 布</el-button>
          </span>
        </el-dialog>
    </div>
</template>

<script>
import Header from '../Header.vue'
import Nav from '../Nav.vue'
export default {
    data(){
        return {
            dialogVisible:false,
            dialogVisible2:false,
            dialogVisible3:false,
            tableData:[{
                name1:'20221217001',
                name2:'古猿人进化史',
                name3:'张三',
                name4:'历史文学',
                name5:'13588889909',
                name6:'12'
            },{
                name1:'20221217001',
                name2:'古猿人进化史',
                name3:'张三',
                name4:'历史文学',
                name5:'13588889909',
                name6:'12'
            }],
            tableData2:[{
                name1:'/',
                name2:'张三',
                name3:'男',
                name4:'330327********1220',
                name5:'13788920192',
                name6:'邮箱地址',
                name7:'/',
            },{
                name1:'/',
                name2:'张三',
                name3:'男',
                name4:'330327********1220',
                name5:'13788920192',
                name6:'邮箱地址',
                name7:'/',
            }],
            form:{
                region:"",
                region2:"",
                region3:"",
                region4:"",
                name:'',
                name2:'',
                name3:'',
                name4:'',
                name5:'',
                name6:'',
                name7:'',
            },
            form1:{
              name:'',
              name2:'',
              name3:'',
              name4:'',
              name5:'',
              name6:'',
              name7:'',
              region:'',
              region2:'',
              region3:'',
              region4:'',
              region5:'',
              desc:'',
            },
            fileList:
            [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'},
             {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}],
        }
    },
    components:{
    Header,
    Nav
  },
  methods:{}
}
</script>

<style lang="less" scoped>
    .box-card{
        width: 91%;
        float: right;
        margin-right: 1%;
        margin-top: -44%;
    }
body{
  position: relative;
}
.headertitle{
  position: absolute;
  top: 0;
  z-index: 999;
  margin-top: 20px;
  margin-left: 180px;
  font-size: 18px;
}
.bji{
    color: #a4bfea;
    border: 1px solid #a4bfea;
}
.del{
    color: red;
    border: 1px solid red;
}
</style>